import React, { useState, useEffect } from 'react';
import "./commanage.scss"
import { Button, Input, Space, Table, Select, notification, Form } from 'antd';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { list } from "../../../api/mxh"
import { deletese } from '../../../api/mxh';
import { selects } from '../../../api/mxh';
const Commanage = () => {
    // 保存路由状态
    const navigate = useNavigate()
    const [show, setshow] = useState(false)
    const [datas, setdata] = useState([{}])
    // 加载动画开关
    const [load, setload] = useState(false)
    const dispatch = useDispatch()
    const shows = () => {
        setshow(!show)
    }
    // 表单数据
    // 点击添加
    const add = () => {
        // 点击跳转添加商品页面
        dispatch({ type: "SAVE_Flag", payload: { flag: true } })
        navigate("/index/addcom/" + { id: "" })
    }
    // 点击编辑回显
    const exits = (id: any) => {
        dispatch({ type: "SAVE_Flag", payload: { flag: false } })
        navigate("/index/addcom/" + id)
    }
    const deletes = async (id: any) => {
        // console.log(id);
        var res = await deletese({ id })
        if (res.data.code == 200) {
            notification.success({ message: "下架成功" })
            lists()
        }

    }
    const columns: any = [
        {
            title: '商品',
            key: "shopping_name",
            render: (text: any, record: any, index: any) =>
                <>
                    <img src={record.img} alt="请稍后" />
                    {record.shopping_name}
                </>

        },
        {
            align: "center",
            title: '商品分类',
            key: "shopping_classification",
        },
        {
            align: "center",
            title: '商品价格',
            key: "shopping_price",
            render: (text: any, record: any, index: any) => <span style={{ fontSize: 18, fontWeight: 500, color: "#ff6600" }}>￥{record.shopping_price}</span>
        },
        {
            align: "center",
            title: '销售量',
            key: "Sales_volume",
        },
        {
            align: "center",
            title: '上架状态',
            render: (text: any, record: any, index: any) => <span style={record.Onshelf_state == "1" ? { color: "green" } : { color: "red" }}>{record.Onshelf_state == "1" ? "上架" : "下架"}</span>,
            key: "Onshelf_state",
        },
        {
            align: "center",
            title: '审核状态',
            key: "state",
            render: (text: any, record: any, index: any) => <span style={record.state == "0" ? { color: "green" } : { color: "red" }}>{record.state == "0" ? "审核通过" : "待审核"}</span>,
        },
        {
            align: "center",
            title: '操作',
            key: "exit",
            render: (text: any, record: any, index: any) =>
                <>
                    <Button type="primary" style={{ backgroundColor: "rgba(25, 158, 216, 1)", marginRight: 10 }} onClick={() => { exits(record.id) }}>编辑</Button>
                    <Button type="primary" style={{ backgroundColor: "#fff", border: "1px solid rgba(25, 158, 216, 1)", color: "rgba(25, 158, 216, 1)" }} onClick={() => { deletes(record.id) }}>
                        下架
                    </Button>
                </>

        },
    ];
    useEffect(() => {
        lists()
    }, [])
    var lists = async () => {
        setload(true)
        var res = await list({ username: "admin" })
        // console.log(res.data.data);
        setdata(res.data.data)
        setload(false)
    }
    const onFinishs = async (values: any) => {
        var res = await selects(values)
        // console.log(res);
        if (res.data.code == 200) {
            notification.success({ message: "查询成功" })
            setdata(res.data.data)
        } else {
            notification.error({ message: "查询失败，重新查询" })
        }

    }
    return (
        <div className='commanage'>
            <div className="com_top">
                <Space.Compact style={{ width: 400 }}>
                    <Input placeholder="输入商品名称进行搜索" />
                    <Button type="primary">搜索</Button>
                </Space.Compact>
                <Button style={{ marginLeft: 100 }} onClick={shows}>
                    更多筛选项
                    {
                        !show ?
                            <CaretDownOutlined style={{ color: "rgba(67, 141, 238, 1)" }} /> :
                            <CaretUpOutlined style={{ color: "rgba(67, 141, 238, 1)" }} />
                    }
                </Button>
            </div>
            <div className='h_show' style={!show ? { height: 0 } : { height: 70 }}>
                <Form
                    // labelCol={{ span: 14 }}
                    // wrapperCol={{ span: 24 }}
                    // layout="horizontal"
                    style={{ minWidth: 800, display: "flex", justifyContent: "space-evenly", alignItems: "center" }}
                    onFinish={onFinishs}
                >
                    <Form.Item label="商品分类:" name="shopping_classification">
                        <Select >
                            <Select.Option value="手机">手机</Select.Option>
                            <Select.Option value="笔记本">笔记本</Select.Option>
                            <Select.Option value="耳机">耳机</Select.Option>
                            <Select.Option value="键盘">键盘</Select.Option>
                            <Select.Option value="鼠标">鼠标</Select.Option>
                            <Select.Option value="衣服">衣服</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label=" 上架状态：" name="Onshelf_state">
                        <Select >
                            <Select.Option value="1">上架</Select.Option>
                            <Select.Option value="2">下架</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="审核状态：" name="state">
                        <Select>
                            <Select.Option value="0">审核通过</Select.Option>
                            <Select.Option value="1">审核不通过</Select.Option>
                            <Select.Option value="2">待审核</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <Button type="primary" style={{ backgroundColor: "rgba(67, 141, 238, 1)", margin: "30px 0" }} onClick={add}>添加商品</Button>
            <Table dataSource={datas} columns={columns} loading={load} />
        </div>

    )
}

export default Commanage;